<template>
    <!-- 专家介绍弹框 -->
  <div class="docDialog">
      <el-dialog
          :close-on-click-modal="false"
          v-model="isShow.value"
          :show-close="false"
          @close="emit('handelDialogClose')">
          <i class="close iconfont icon-guanbi" @click="emit('closeDialog')"></i>
          <div class="content">
            <div v-show="docParams.depShow" style="height: 100%;">
                <div class="title">专家介绍</div>
                <div class="nav-search">
                    <el-select v-model="selectVal.campusVal" placeholder="院本部" :teleported="false" @change="changeCampus">
                      <el-option
                          v-for="(value, key) in doctorDialogData.docInfo.campus"
                          :key="key"
                          :label="value.name"
                          :value="key"
                      />
                    </el-select>
                      <el-select v-model="selectVal.depVal" placeholder="全部分类" :teleported="false" @change="changeDep">
                      <el-option label="全部分类" value='all'></el-option>
                      <el-option
                          v-for="(value, key) in doctorDialogData.docInfo.depClass"
                          :key="key"
                          :label="value.val"
                          :value="key"
                      />
                    </el-select>
                      <el-select v-model="selectVal.allVal" :disabled="docParams.isChoose" placeholder="全部科室" :teleported="false" @change="changeAllDep" id="dep-select">
                      <el-option label="全部科室" value='all'></el-option>
                      <el-option
                          v-for="(value, key) in doctorDialogData.docInfo.allDep"
                          :key="key"
                          :label="value.catname"
                          :value="key"
                      />
                    </el-select>
                    <div class="search-box">
                      <el-input
                        clearable
                        v-model="docParams.keywords"
                        placeholder="请输入医生姓名"
                        class="search"
                        @keyup.enter="searchDoc"
                        @clear="clearKeywords"
                      >
                        <template #append>
                            <button @click="searchDoc"><Search style="width: 1em; height: 1em; vertical-align: middle" /></button>
                        </template>
                      </el-input>
                    </div>
                </div>
                <el-scrollbar height="460px">
                    <div class="doc-content">
                        <div class="dep-class" v-for="(value, key) in doctorDialogData.docInfo.curDep" :key="key">
                          <div class="dep-tit">
                          <div class="dep-name" @click="toDepartment(value.catid,value.catname)">{{value.catname}}</div>
                          <div class="more" @click="toDepartment(value.catid,value.catname)">更多</div>
                          </div>
                          <div class="doc-name">
                            <div class="doc-item" v-for="item in value.doc_list" :key="item.id" @click="toDocDetail(value.catid, item.id)">{{item.title}}</div>
                          </div>
                      </div>
                    </div>
                </el-scrollbar>
            </div>
            <!-- 科室医生 -->
            <div v-show="docParams.docShow" style="height: 100%;">
                <div class="title mobile-tit">专家介绍</div>
                <i class="fanhui iconfont icon-xiangxiajiantou"  @click="goback"></i>
                <div class="top">
                <div class="back" @click="goback">返回</div>
                <el-breadcrumb :separator-icon="ArrowRight">
                    <el-breadcrumb-item>{{docParams.depName}}</el-breadcrumb-item>
                </el-breadcrumb>
                </div>
                <div class="nav-search">
                  <el-select v-model="selectVal.protitVal" placeholder="全部职称" :teleported="false" @change="changePosition">
                      <el-option label="全部职称" value='all'></el-option>
                      <el-option
                      v-for="protit in doctorDialogData.docInfo.protitList.value"
                      :key="protit.id"
                      :label="protit.name"
                      :value="protit.id"
                      />
                  </el-select>
                  <div class="search-box">
                    <el-input
                        clearable
                        v-model="docParams.keyword"
                        placeholder="请输入医生姓名"
                        class="search"
                        @keyup.enter="searchDoctor"
                        @clear="clearKeyword"
                    >
                        <template #append>
                          <button @click="searchDoctor"><Search style="width: 1em; height: 1em; vertical-align: middle" /></button>
                        </template>
                    </el-input>
                  </div>
                </div>
                <el-scrollbar height="460px">
                <div class="doc-content">
                    <div class="doctor" v-for="doc in doctorDialogData.curDocList" :key="doc.id">
                      <div class="doc-info">
                          <img :src="doc.thumb" alt="" @click="toDocDetail(doc.depart,doc.id)">
                          <div class="doc-right">
                            <div class="name">{{doc.title}}</div>
                            <div class="protit"><span>职称：</span>{{docPosition(doc.doc_position)}}</div>
                            <div class="department"><span>科室：</span>{{docParams.depName}}</div>
                          </div>
                      </div>
                      <div class="goodat">
                          擅长：{{doc.goodat}}
                      </div>
                    </div>
                </div>
                </el-scrollbar>
            </div>
            <!-- 医生详情 -->
            <div v-show="docParams.docDetailShow" style="height: 100%;">
                <div class="title mobile-tit">专家介绍</div>
                <i class="fanhui iconfont icon-xiangxiajiantou"  @click="back"></i>
                <div class="top">
                  <div class="back" @click="back">返回</div>
                  <el-breadcrumb :separator-icon="ArrowRight">
                      <el-breadcrumb-item>医生详情</el-breadcrumb-item>
                  </el-breadcrumb>
                </div>
                <el-scrollbar height="500px">
                  <div class="docInfo-content">
                    <div class="doc-intro">
                      <img :src="docDetail.docDetailInfo.thumb" alt="">
                      <div class="info-right">
                        <p class="doc-name">{{docDetail.docDetailInfo.title}}</p>
                        <p><span>职称：</span>{{docDetail.docDetailInfo.doc_position}}</p>
                        <p><span>科室：</span>{{docParams.depName}}</p>
                        <p class="goodat"><span>擅长：</span>{{docDetail.docDetailInfo.goodat}}</p>
                      </div>
                    </div>
                    <div class="docIntro-detail">
                      <div class="intro-tit">医生介绍</div>
                      <div class="intro-detail" v-html="docDetail.docDetailInfo.content"></div>
                    </div>
                  </div>
                </el-scrollbar>
            </div>
          </div>
      </el-dialog>
  </div>
            
</template>
<script setup>
/* eslint-disable */
    import { ref,reactive,toRefs, defineProps, defineEmits } from 'vue'
    import { ArrowRight,Search } from '@element-plus/icons-vue'
    import {
        ElDialog,
        ElSelect,
        ElScrollbar,
        ElBreadcrumb
    } from 'element-plus'

import { getUrlQueryData} from '@/utils/tools'

import { 
  getSceneList, 
  getNews,
  getNewsInfo, 
  // getHospital, 
  getContact,
  getDoc,
  getDocInfo,
  getBranch,
  getBranchInfo } from '@/api/hosInfo'
const props = defineProps({
    doctorDialogShow:Boolean,
    cmpParams:{
      type: Object,
    }
})
const isShow = reactive({
    get value(){ 
        return props.doctorDialogShow;
    },
    set value(v){
        return ;
    }
})
const { doctorDialogShow, cmpParams } = toRefs(props)
console.log('cmpParams.value',cmpParams.value);

const emit = defineEmits(["closeDialog","handelDialogClose"])

//专家介绍
const doctorDialogData = reactive({
  doctorDialogShow:false,
  docInfo:{
    campus:{},
    depClass:{},
    protitList:{},
    allDep:{},
    curDep:{},
    depList:{},
    searchList:{}
  },
  docList:[],
  curDocList:[],
  allDocList:[]
})
const docParams = reactive({
  depShow: true,
  docShow: false,
  docDetailShow:false,
  depName: '',
  depId:'',
  keywords: '',
  camKey:'',
  keyword:'',
  isChoose:true
})

const selectVal = reactive({
  campusVal:'',
  depVal: 'all',
  allVal:'',
  protitVal:'all'
})
import {getDocJSON} from '@/views/content/VR/dialogCmp/api.js'
//获取医生数据
const getDocData = async (params) => {
  // const res = await getDoc(params)
  const res = getDocJSON
  if (res.status != 200) {
    return
  }
  if(res.data.department_info) {
    doctorDialogData.docInfo.campus = res.data.department_info.department_list;
    doctorDialogData.docInfo.depClass = res.data.department_info.department_classdef;
    doctorDialogData.docInfo.protitList = res.data.protit_type.doc_position;
    //默认显示院本部
    selectVal.campusVal = docParams.camKey = Object.keys(res.data.department_info.department_list)[0];
    getAllDep()
  }else {
    doctorDialogData.allDocList = doctorDialogData.curDocList = doctorDialogData.docList = res.data
  }
  if(cmpParams.value){
    toDocDetail(cmpParams.value.depId,cmpParams.value.docId)
  }
}
const deepClone = (obj) => {
    return JSON.parse(JSON.stringify(obj))
}
//选择院区
const getAllDep = () => {
  let depObj = doctorDialogData.docInfo.campus[docParams.camKey].child;
    for(let key in depObj) {
      doctorDialogData.docInfo.allDep = Object.assign(doctorDialogData.docInfo.allDep, depObj[key].childids)
    }
    doctorDialogData.docInfo.depList = deepClone(doctorDialogData.docInfo.allDep);
    doctorDialogData.docInfo.curDep = deepClone(doctorDialogData.docInfo.allDep);
    doctorDialogData.docInfo.searchList = deepClone(doctorDialogData.docInfo.allDep);
}
const changeCampus = val => {
  docParams.camKey = val
  getAllDep();
}

//选择一级科室
const changeDep = val => {
  doctorDialogData.docInfo.curDep = {}
  doctorDialogData.docInfo.allDep = {}
  let depObj = doctorDialogData.docInfo.campus[docParams.camKey].child;
  for(let key in depObj) {
    if(key == val) {
      selectVal.allVal = 'all';
      doctorDialogData.docInfo.depList = deepClone(depObj[key].childids);
      doctorDialogData.docInfo.curDep = deepClone(depObj[key].childids);
      doctorDialogData.docInfo.searchList = doctorDialogData.docInfo.allDep = depObj[key].childids;
      docParams.isChoose = false
    }
    else if(val == 'all'){
      selectVal.allVal = '';
      doctorDialogData.docInfo.depList = deepClone(Object.assign(doctorDialogData.docInfo.allDep, depObj[key].childids))
      doctorDialogData.docInfo.curDep = deepClone(Object.assign(doctorDialogData.docInfo.curDep, depObj[key].childids))
      doctorDialogData.docInfo.searchList = doctorDialogData.docInfo.allDep  = Object.assign(doctorDialogData.docInfo.allDep, depObj[key].childids)
      docParams.isChoose = true
    }
  }
  if(docParams.keywords) {
    searchDoc()
  }
}

//选择二级科室
const changeAllDep = val => {
  doctorDialogData.docInfo.curDep = {}
  for(let key in doctorDialogData.docInfo.allDep) {
    if(val == key) {
      doctorDialogData.docInfo.depList = deepClone({[key]:doctorDialogData.docInfo.allDep[key]})
      doctorDialogData.docInfo.curDep = deepClone({[key]:doctorDialogData.docInfo.allDep[key]})
      doctorDialogData.docInfo.searchList = {[key]:doctorDialogData.docInfo.allDep[key]}
    }else if(val == 'all') {
      doctorDialogData.docInfo.depList = deepClone(doctorDialogData.docInfo.allDep)
      doctorDialogData.docInfo.curDep = deepClone(doctorDialogData.docInfo.allDep)
      doctorDialogData.docInfo.searchList = doctorDialogData.docInfo.allDep;
    }
  }
  if(docParams.keywords) {
    searchDoc()
  }
}

//搜索医生
const searchDoc = () => {
  doctorDialogData.docInfo.curDep = {};
  for(let key in doctorDialogData.docInfo.depList ) {
    doctorDialogData.docInfo.depList[key].doc_list.forEach(item => {
      if(item.title.indexOf(docParams.keywords) != -1) {
        doctorDialogData.docInfo.curDep = Object.assign(doctorDialogData.docInfo.curDep, {[key]:doctorDialogData.docInfo.depList[key]})
      }
    })
  }
  for(let key in doctorDialogData.docInfo.curDep) {
    doctorDialogData.docInfo.curDep[key].doc_list = doctorDialogData.docInfo.curDep[key].doc_list.filter((item) => {
      return item.title.indexOf(docParams.keywords) != -1
    })
  }
  if(!docParams.keywords) {
    doctorDialogData.docInfo.curDep = deepClone(doctorDialogData.docInfo.searchList)
  }
}

const clearKeywords = () => {
  doctorDialogData.docInfo.curDep = deepClone(doctorDialogData.docInfo.searchList)
}

const goback = () => {
  docParams.depShow = true;
  docParams.docShow = false;
}
//查看该科室下所有医生
const toDepartment = (catid,name) => {
  docParams.depName = name;
  docParams.depId = catid;
  docParams.depShow = false;
  docParams.docShow = true;
  selectVal.protitVal = 'all';
  // 获取数据
  const params = {
    url:getUrlQueryData(),
    catid
  }
  getDocData(params)
}
const docPosition = id => {
  let position = ''
  doctorDialogData.docInfo.protitList.value.forEach(pos => {
    if(id == pos.id) {
      position = pos.name
    }
  })
  return position
}
//选择职称
const changePosition = val => {
  doctorDialogData.curDocList = [];
  doctorDialogData.docList.forEach(item => {
    if(val == item.doc_position) {
      doctorDialogData.curDocList.push(item)
    }else if(val == 'all') {
      doctorDialogData.curDocList =  doctorDialogData.docList
    }
  })
  doctorDialogData.allDocList = doctorDialogData.curDocList
  if(docParams.keyword) {
    searchDoctor()
  }
}
//搜索医生
const searchDoctor = () => {
  doctorDialogData.curDocList = [];
  doctorDialogData.allDocList.forEach(item => {
    if(item.title.indexOf(docParams.keyword) != -1) {
      doctorDialogData.curDocList.push(item);
    }
  })
}
const clearKeyword = () => {
  doctorDialogData.curDocList = doctorDialogData.allDocList
}

const docDetail = reactive({
  docDetailInfo : {}
})
import {getDocInfoJSON} from '@/views/content/VR/dialogCmp/api.js'
//查看医生详情
const getDocDetail = async (params) => {
  // const res = await getDocInfo(params)
  const res = getDocInfoJSON

  if (res.status != 200) {
    return
  }
  docParams.depName = doctorDialogData.docInfo.curDep[res.data.depart].catname
  docDetail.docDetailInfo = res.data;
}
const back = () => {
  docParams.docDetailShow = false;
  if(docParams.depId == departId.value) {
    docParams.docShow = true;
    docParams.depId = '';
  }else {
    docParams.depShow = true;
  }
}
const departId = ref('')
const toDocDetail = (depId,docId) => {
  departId.value = depId
  docParams.docShow = false;
  docParams.depShow = false;
  docParams.docDetailShow = true;
  const params = {
    url:getUrlQueryData(),
    depId,
    docId
  }
  getDocDetail(params)
}

getDocData(getUrlQueryData())

</script>
<style scoped>
     .content .title {
  font-size: 24px;
  color: #000;
  margin-bottom: 36px;
  text-align: center;
}
/* 专家介绍弹框 */
.docDialog .content .mobile-tit,
.docDialog .content .fanhui {
  display: none;
}
.docDialog >>> .el-dialog {
  border-radius: 4px;
  width: 960px;
  min-width: 375px;
}
.docDialog >>> .el-dialog__header {
    display: none;
}
.docDialog >>> .el-dialog__body {
  padding: 40px 0 0 !important;
  height: 100%;
  box-sizing: border-box;
}
.docDialog .content {
  padding-bottom: 80px;
  height: 100%;
  box-sizing: border-box;
}
.docDialog .content .nav-search {
  padding: 0 80px ;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.docDialog .content .nav-search >>> .el-select {
  /* margin-right: 20px; */
  margin-bottom: 10px;
}
.docDialog .content .nav-search >>> .el-input {
  width: 260px;
  height: 40px;
  border-radius: 50px;
}
.docDialog .content .nav-search >>> .el-select .el-input {
  width: 160px;
}
.docDialog .content .nav-search >>> .el-input__wrapper {
  border-radius: 50px;
  box-shadow: none;
  background-color: #F2F2F2;
}
.docDialog .content .nav-search .search-box >>> .el-input__wrapper {
    padding: 1px 0 1px 11px;
  }
.docDialog .content .nav-search >>> .el-input__wrapper .el-input__inner {
  color: #333333;
}
.docDialog .content .nav-search >>> .search .el-input__wrapper {
  border: 1px solid rgba(170, 170, 170, 0.5);
  border-radius: 50px 0 0 50px;
  border-right: none;
  background-color: #fff;
}
.docDialog .content .nav-search >>> .el-input__wrapper:hover {
  box-shadow: none;
}
.docDialog .content .nav-search >>> .el-input-group__append {
  border-radius: 0 50px 50px 0;
  box-shadow: none;
  border: 1px solid rgba(170, 170, 170, 0.5);
  border-left: none;
  background-color: transparent;
  box-sizing: border-box;
  color: #333333;
  font-size: 16px;
  padding: 0 0 0 0; 
}
.docDialog .content .nav-search >>> .el-input-group__append .el-button {
  outline: none
}
.docDialog .content .nav-search >>> .el-select-dropdown  .el-scrollbar__bar.is-vertical {
  right: 8px;
}
.docDialog .content .nav-search button{
  background: none;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 0 50px 50px 0;
  cursor: pointer;
}
.docDialog .content .doc-content {
  padding: 1px 80px 0;
  display: flex;
  flex-wrap: wrap;
  margin-right: -10px;
}
.docDialog .doc-content .dep-class {
  width :260px;
  height: 182px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  margin-right: 10px;
  margin-bottom: 10px;
  box-sizing: border-box;
  padding: 20px 10px 32px;
}
.docDialog .doc-content .dep-class .dep-tit {
  display: flex;
  justify-content: space-between;
  position: relative;
}
.doc-content .dep-class .dep-tit .dep-name {
  cursor: pointer;
  width:180px;
  height: 32px;
  font-size: 16px;
  line-height: 1;
  color: #4D668A;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-wrap: break-word;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box !important;
}
.doc-content .dep-class .dep-tit .more {
  font-size: 12px;
  color: #1F73F2;
  cursor: pointer;
}
.doc-content .dep-class .dep-tit:after {
  content: "";
  display:block;
  width: 240px;
  height: 1px;
  background-color: rgba(170, 170, 170, 0.2);
  position: absolute;
  bottom: -5px;
}
.doc-content .dep-class .doc-name {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  height: 72px;
  overflow: hidden;
}
.doc-content .dep-class .doc-name .doc-item {
  width:80px;
  height: 14px;
  font-size: 14px;
  color: #333333;
  margin-bottom: 15px;
  line-height: 1;
  cursor: pointer;
}
.doctor {
  width :260px;
  height: 227px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  margin-right: 10px;
  margin-bottom: 10px;
  box-sizing: border-box;
  padding: 20px;
}
.doctor .doc-info {
  display: flex;
  position: relative;
}
.doctor .doc-info img {
  width:80px;
  height: 112px;
  cursor: pointer;
}
.doctor .doc-info .doc-right {
  margin-left: 20px;
  cursor: default;
}
.doctor .doc-info .doc-right .name {
  font-size: 14px;
  font-family: Arial;
  line-height: 14px;
  margin-bottom: 10px;
}
.doctor .doc-info .doc-right span {
  font-size: 12px;
  line-height: 1;
  color: #AAAAAA;
}
.doctor .doc-info .doc-right .department {
  color: #036F6F
}
.doctor .doc-info .doc-right .protit {
  color: #333333;
  margin-bottom: 12px;
}
.doctor .doc-info:after {
  content: "";
  display: block;
  width: 220px;
  height: 1px;
  background-color: #E4E4E4;
  position: absolute;
  bottom: -10px;
}
.doctor .goodat {
  margin-top: 20px;
  color: #7F7F7F;
  font-size: 12px;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-wrap: break-word;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box !important;
  cursor: default;
}
/* 医生详情 */
.docInfo-content {
  padding: 24px 80px 70px;
}
.docInfo-content .doc-intro{
  display: flex;
  flex-wrap: wrap;
  height: 262px;
  border-bottom: 1px solid #e4e4e4;
  box-sizing: border-box;
  margin-bottom: 20px;
  position: relative;
}
.docInfo-content img {
  width: 144px;
  height: 200px;
  margin-right: 40px;
}
.docInfo-content .info-right p {
  margin-bottom: 20px;
  font-size: 14px;
  color: #333;
}
.docInfo-content .info-right p span {
  color: #AAAAAA;
}
.docInfo-content .info-right p.doc-name{
  font-size: 20px;
  line-height: 20px;
  font-family: Arial;
  color: #000;
}
.docInfo-content .info-right p.goodat {
  width: 616px;
  line-height: 21px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-wrap: break-word;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  display: -webkit-box !important;
}
.docIntro-detail .intro-tit{
  font-size: 16px;
  font-family: Arial;
  line-height: 16px;
  color: #000;
  margin-bottom: 20px;
}
.docIntro-detail .intro-detail {
  /* overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-wrap: break-word;
  -webkit-line-clamp: 9;
  -webkit-box-orient: vertical;
  display: -webkit-box !important; */
}
.content >>> .el-scrollbar__bar.is-vertical {
  width: 8px;
  right: 20px;
  background-color: rgba(170, 170, 170, 0.5)
}
.content >>> .el-scrollbar__bar.is-horizontal {
  display: none;
}
.content >>> .el-scrollbar__bar.is-vertical>div {
  background-color: #1F73F2;
  opacity: 1;
}
/* 关闭弹框按钮 */
.close {
  font-size: 24px;
  color: #717378;
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}
.close:hover {
  color: #1F73F2;
}
/* 面包屑 */
.content .top {
  display: flex;
  align-items: center;
  padding: 0 80px;
  margin-bottom: 24px;
  font-size: 14px;
}
.content .top >>> .el-breadcrumb {
  margin-top: 1px;
  cursor: default;
}
.content .top .back {
  position: relative;
  margin-right: 20px;
  color: #1F73F2;
  cursor: pointer;
}
.content .top .back:after {
  content: '';
  display: block;
  height: 16px;
  width: 1px;
  background-color: rgba(170, 170, 170, 0.5);
  position: absolute;
  top: 2px;
  right: -0.625rem;
}
@media screen and (max-width: 1360px) and  (min-width: 1024px) {
  .docDialog >>> .el-dialog{
    transform: scale(0.8);
    transition:transform 0.3s linear;
  }
}
@media screen and (max-width: 1024px) {
    /* 专家介绍 */
  .close {
    font-size: 16px;
  }
  .docDialog >>> .el-overlay {
    z-index: 10001 !important;
  }
  .docDialog >>> .el-dialog {
    /* width: 360px; */
    /* height: 748px; */
    width: 95% !important;
    height: 95%;
    margin: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 4px 4px 0 0;
  }
  .docDialog >>> .el-dialog__body {
      padding: 20px 0 0 !important;
  }
  .docDialog .content {
    padding-bottom: 27px;
  }
  .docDialog >>> .el-scrollbar {
      height: calc(100% - 160px);
  }
  .docDialog >>> .el-scrollbar__wrap {
      height: 100% !important;
  }
  .docDialog >>> .el-scrollbar__bar.is-vertical {
    right: 10px;
  }
  .content .title {
    font-size: 18px;
    margin-bottom: 30px;
  }
  .docDialog .content .nav-search {
    padding: 0 21px ;
    margin-bottom: 18px;
  }
  .search-box {
    flex: 1;
    min-width: 320px;
  }
  .docDialog .content .nav-search >>> .el-input {
    width: 100%;
    height: 32px;
    border-radius: 50px;
  }
  .docDialog .content .nav-search >>> .el-select .el-input {
    width: 104px;
  }
  .docDialog .content .nav-search button{
    height: 32px;
  }
  .docDialog .content .doc-content {
    padding: 1px 30px 0;
  }
  .docDialog .doc-content .dep-class {
    width :300px;
    height: 160px;
    padding: 10px 10px 21px;
    flex: 1;
  }
  .doc-content .dep-class .dep-tit .dep-name {
    height: 26px;
    font-size: 14px;
  }
  .doc-content .dep-class .dep-tit:after {
    width: 100%;
  }
  .docDialog .content .mobile-tit,
  .docDialog .content .fanhui {
    display: block;
  }
  .docDialog .content .fanhui {
    position: absolute;
    left: 20px;
    top: 25px;
    font-weight: bold;
    font-size: 16px;
    color: #1F73F2;
    transform: rotate(90deg);
    cursor: pointer;
  }
  .docDialog .content .top {
    padding: 0 30px;
    font-size: 12px;
    margin-bottom: 20px;
  }
  .content .top .back {
    display: none;
  }
  .content .top >>> .el-breadcrumb__inner {
    color: #AAA;
  }
  .doctor {
    width :300px;
    height: 227px;
  }
  .doctor .doc-info:after {
    width: 100%;
  }
  /* 医生详情 */
  .docInfo-content {
    padding: 0 30px 0;
  }
  .docInfo-content .doc-intro {
    height: 292px;
  }
  .docInfo-content img {
    width: 80px;
    height: 112px;
    margin-right: 12px;
  }
  .docInfo-content .info-right {
    cursor: default;
  }
  .docInfo-content .info-right p.goodat {
    position: absolute;
    -webkit-line-clamp: 7;
    left: 0;
    top: 128px;
    width: 100%;
  }
  .docInfo-content .info-right p {
    margin-bottom: 8px;
  }
  .docInfo-content .info-right p.doc-name {
    font-size: 14px;
    line-height: 14px;
  }
  .docIntro-detail {
    cursor: default;
  }
}
</style>

